<template>
	<view class="notice">
		<notice-topbar class="notice-topbar-class" :tabIndex="tabIndex" @changTopbar="changTopbar"></notice-topbar>

		<view class="tab-swiper">
			<swiper class="swiper-box" :style="{height:swiperheight+'px'}" :current="tabIndex" @change="tabChange">
				<swiper-item v-for="(items,index) in swiperList" :key="items.id">
					<scroll-view scroll-y class="list">
						<template v-if="items.list.length > 0">
							<block>
								<!-- <notice-list v-if="tabIndex == 0" :noticeListData="items.list" @refData="refData"
									@cleanSystemMsg="cleanSystemMsg">
								</notice-list>
								<notice-list-my v-if="tabIndex == 1" 
									>
								</notice-list-my> -->
								<notice-show :noticeListData="items.list" @cleanSystemMsg="cleanSystemMsg"
									@refData="refData" :showId="items.id"></notice-show>
							</block>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

		<!-- <notice-list-my v-if="tabIndex == 1" :noticeListData="noticeListData" @cleanSystemMsg="cleanSystemMsg">
		</notice-list-my> -->


	</view>
</template>

<script>
	//导入子组件
	import noticeTopbar from './child/notice-topbar.vue'
	import noticeShow from './child/notice-show.vue'

	import {
		mapActions
	} from 'vuex'

	// import {
	// 	getSysMsg,
	// 	cleanAllSyStemMsg,
	// 	cleanAllSyStemMsgAll
	// } from '@/api/http/msg/msg.js'

	import {
		getMsgBySystem,
		cleanAll,
		deleteById
	} from '@/api/http/msg/system_msg.js'

	export default {
		components: {
			noticeTopbar,
			noticeShow
		},
		data() {
			return {
				page: 1,
				size: 50,
				noticeListData: [],
				tabIndex: 0,

				swiperheight: 500,
				swiperList: []
			}
		},
		methods: {
			...mapActions('m_chat', ['readSysNum']),
			changTopbar(id) {
				this.tabIndex = id
				this.getNoticeList()
			},
			tabChange(e) {
				//console.log(e.detail.current)
				this.tabIndex = e.detail.current;
			},
			getAllList() {
				Promise.all([getMsgBySystem(this.page, this.size, 1), getMsgBySystem(this.page, this.size, 2)]).then((
					res) => {
						//console.log(res)
						var myList = res[0].data
						if (myList.pubInfo.code !== 0) {
							return uni.$showMsg(myList.pubInfo.message);
						}
						var friendList = res[1].data
						if (friendList.pubInfo.code !== 0) {
							return uni.$showMsg(friendList.pubInfo.message);
						}
						var addMyList = {
							id: 0,
							list: myList.busInfo
						}
						var addFriendList = {
							id: 1,
							list: friendList.busInfo
						}
						this.swiperList = []
						this.swiperList.push(addMyList)
						this.swiperList.push(addFriendList)
						// this.swiperList = res[0].data
						// this.tabList = res[1].data
						// //攻略景点列表数据
						// this.activeList = res[2].data
					}).catch((err) => {
					log(err)
				})

				//console.log(this.swiperList)
			},
			getNoticeList() {
				//console.log(this.tabIndex)
				getMsgBySystem(this.page, this.size, this.tabIndex).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					this.noticeListData = res.data.busInfo
					//console.log(this.noticeListData)
				})
			},
			refData() {
				this.getAllList()
			},
			cleanSystemMsg(id) {
				deleteById(id).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					//return uni.$showMsg('删除成功');
					setTimeout(() => {
						this.refData()
					}, 100)

				})

			}
		},

		mounted() {
			this.getAllList()

			const query = uni.createSelectorQuery().in(this);
			var mainHeight = 0
			query.select('.notice').boundingClientRect(data => {
				//console.log(data.height)
				mainHeight = data.height
				//this.$emit('changeHight',  + height)
			}).exec();
			/* query.select('.notice-head-class').boundingClientRect(data => {
				//console.log(data.height)
				mainHeight = mainHeight - data.height
				//this.$emit('changeHight',  + height)
			}).exec(); */
			query.select('.notice-topbar-class').boundingClientRect(data => {
				//console.log(data.height)
				mainHeight = mainHeight - data.height
				//this.$emit('changeHight',  + height)
			}).exec();
			//console.log(mainHeight)
			this.swiperheight = mainHeight - 10
		},
		onShow() {
			//消息已读
			this.readSysNum()
		},
		onReachBottom() {
			this.page = this.page + 1
			this.getAllList()
			//console.log('rqwerwe')
		},
		async onNavigationBarButtonTap(e) {
			const succ = await uni.showModal({
				title: '提示',
				content: '是否清空系统消息？'
			}).catch(err => {

			})

			if (succ && succ.confirm) {
				//获取所有sys消息id
				//console.log(sysIds)
				cleanAll().then(res => {
					const result = res.data
					if (result.pubInfo.code !== 0) {
						return uni.$showMsg(result.pubInfo.message);
					}
					this.refData()
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.notice {
		width: 100%;
		height: 100vh;
		// background-color: red;
	}
</style>